<template>
    <div class="login">
        <van-nav-bar
            title="登录|注册"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <van-row>
            <van-col span="4"></van-col>
            <van-col span="18" class="bt">肚子叫了吗外卖</van-col>
            <van-col span="2"></van-col>
        </van-row>
        <van-row>
            <van-col span="2"></van-col>
            <van-col span="20">
                <van-tabs type="card" animated swipeable color="#1989FA">
                    <van-tab title="短信登录">
                        <van-cell-group >
                         <van-field
                            v-model="phone"
                            label="手机号"
                            placeholder="请输入手机号"    
                        >
                        <van-button slot="button" size="small" type="primary" color="#1989FA">发送验证码</van-button>
                        </van-field>
                        <van-field
                            v-model="sms"
                            center
                            clearable
                            label="验证码"
                            placeholder="请输入短信验证码"
                        />                     
                        </van-cell-group>
                        <div class="tishi">温馨提示：未注册肚子叫了吗外卖的手机号，登录时将自动注册，且代表已同意<a href="#" class="xieyi">《用户服务协议》</a></div>
                    </van-tab>
                    <van-tab title="密码登录">
                        <van-cell-group>
                            <van-field
                                v-model="username"
                                required                            
                                label="用户名"                           
                                placeholder="请输入用户名"                              
                            />
                            <van-field
                                v-model="password"
                                type="password"
                                label="密码"
                                placeholder="请输入密码"
                                required
                            />                        
                            <van-field
                                v-model="sms"
                                center                 
                                placeholder="验证码"
                            >    
                            </van-field>
                            </van-cell-group>
                    </van-tab>
                </van-tabs>      
            </van-col>
            <van-col span="2"></van-col>
        </van-row>
         <van-row>
            <van-col span="2"></van-col>
            <van-col span="20">
                <br>
                <br>
                <van-button type="primary" to="/" size="large" color="#1989FA">登录</van-button>
                    <center class="tishi">关于我们</center>
                </van-col>
            <van-col span="2"></van-col>
        </van-row>


    </div>
</template>

<script>
    export default {
        methods: {
            onClickLeft() {
                this.$router.push('/')
            },
        },
        
    }

</script>



<style lang="stylus">
  .bt{
      font-size 38px
      font-weight bold
      margin-top 75px
      margin-bottom 20px
      color #1989FA
  }
  .tishi{
      font-size 12px
      color #A9A9A9
  }
  .xieyi{
      color #1989FA
  }
</style>